<template>
    <div id="app">
        <div id="nav">

            <button @click="testClick">测试按钮</button>
            <!-- 模态框 -->
            <modal
                :show="modalShow"
                :width="500"
                :borderRadius="3"
                headerColor="orange"
                headerText="This is a Title"
                headerTextColor="#fff"
                contentText="The Modal content text The Modal content text  The Modal content text The Modal content text "
                contentTextColor="#333"
                position="center"
                :btnGroupShow="true"
                confirmText="是"
                cancelText="否"
                @confirm="modalConfirm"
                @close="modalClose"
            />


        </div>
        <router-view/>
    </div>
</template>

<style>

</style>
<script>
    import Modal from "components/Modal";

    export default {
        name: "App",
        data() {
          return {
              modalShow: false
          }
        },
        components: { Modal },
        methods: {
          modalConfirm() {
            console.log("确定");
            this.modalShow = false;
          },

          modalClose() {
            this.modalShow = false;
            console.log("modalClose");
          },
          testClick() {
              this.modalShow = true;
          }
        }
    }
</script>
